<template>
  <div id="app">
      <div class="back1"
        @click = "back"
      >
          <div class = "back_img">
          </div>
      </div>
   <iframe id="iframe" src="https://m.amap.com/picker/?keywords=%E5%86%99%E5%AD%97%E6%A5%BC,%E5%B0%8F%E5%8C%BA,%E5%AD%A6%E6%A0%A1&zoom=15&center=116.470098,39.992838&radius=1000&total=20&key=2f616198dce1d98b90bd5cbd2aec8ead" width="100%" height="500"></iframe>
  </div>
</template>

<script>
  import { mapState,mapMutations } from 'vuex'

export default {
  data () {
    return {
      msg: 'vue-amap向你问好！',
      longitude:'',
      latitude:"",
    }
  },

  mounted(){
    //   console.log(11)
    var _this = this
      var iframe = document.getElementById('iframe').contentWindow;
        document.getElementById('iframe').onload = function() {
          iframe.postMessage('hello', 'https://m.amap.com/picker/');
        };
        window.addEventListener("message", function(e) {
            // console.log(e)
            // console.log(e.data.location)
            if(e.data.location){
                var h =  e.data.location.split(",")
                // console.log (h)
                _this.longitude = h[1];
                _this.latitude = h[0];
                console.log(_this.longitude,_this.latitude,2)
                _this.ShopNear()
            }

        //   alert('您选择了:' + e.data.name + ',' + e.data.location)
        }, false);
  },
  methods:{ 
      back(){
          this.$router.go(-1)
      },
      ShopNear(){
          let token = localStorage.getItem('user_token');
          let longitude = this.longitude;
          let latitude = this.latitude;
          // this.$store.
          this.$store.state.latitude = this.latitude
          this.$store.state.longitude = this.longitude
          console.log(this.$store.state.longitude)
          // alert(this.$store.state.longitude)
          // 附近的商品
          this.$router.push("/index")
          // this.$api.Shop_near({token,latitude,longitude},res=>{
          //     // console.log(res)
          //     console.log(this.$store.state.latitude)
          //     this.$router.push("/index")
          // })
      },
  },
}
</script>

<style  lang="scss" >
    .amap-wrapper {
        width: 500px;
        height: 500px;
    }
    .back1{
        position: absolute;
        left:0px;
        height:48px;
        width:50px;
    }
</style>

